<template>
    <div class="mainV">
        <div class="mainT">
            <i class="el-icon-back" @click="goBack"></i>
            <p>投诉与建议</p>
            <div></div>
        </div>
        <div class="mVc">
            <div class="mVct">
                <div class="mVcti">机构：<span>{{ info.orgId_dictText }}</span></div>
                <div class="mVcti">科室：<span>{{ info.dept_dictText }}</span></div>
                <div class="mVcti">医生：<span>{{ info.doctorId_dictText }}</span></div>
                <div class="mVcti">预约时段：<span>{{ info.yyDate }} {{ info.yyInterval }}</span></div>
            </div>
            <div class="mVcr">
                <div class="mVcti">
                    <p class="mVctiR">标题：</p>
                    <el-input v-model="form.title"></el-input>
                </div>
                <div class="mVcti">
                    <p class="mVctiR">详细描述：</p>
                    <el-input type="textarea" v-model="form.detail"></el-input>
                </div>
                <div class="mVcti">
                    <p>投诉建议：</p>
                    <el-input type="textarea" v-model="form.suggest"></el-input>
                </div>
            </div>
        </div>
        <div class="sub">
            <el-button type="success" @click="submitFrom"
                style="width: 220px;margin-top: 40px;font-size: 18px;">提交</el-button>
        </div>
    </div>
</template>

<script>
import { fetchPost, fetchGet } from '@/api/request'
export default {
    data() {
        return {
            info: {},
            form: {},
        }
    },
    mounted() {
        this.info = this.$route.query.item
    },
    methods: {
        submitFrom() {
            const that = this
            if (!that.form.title) {
                that.$message({
                    type: 'error',
                    message: '请输入标题!'
                });
                return;
            } else if (!that.form.detail) {
                that.$message({
                    type: 'error',
                    message: '请输入详细描述!'
                });
                return;
            }
            this.form.patientId = JSON.parse(localStorage.getItem('wzPatientInfo')).id
            this.form.orgId = this.info.orgId
            this.form.doctorId = this.info.doctorId
            this.form.deptId = this.info.deptId
            fetchPost('/wz/quality/wzQualitySuggest/add', that.form).then(res => {
                if (res.code == 200) {
                    setTimeout(() => {
                        that.$router.back();
                    }, 1000);
                }
                that.$message({
                    type: 'success',
                    message: res.message
                });
            })
        },
        goBack() {
            this.$router.back()
        }
    }
}
</script>

<style lang="scss" scoped>
.mainV {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    

    .mainT {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        line-height: 60px;
        background-color: #fff;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;

        i {
            font-size: 32px;
            color: #67C23A;
            display: inline-block;
            margin-left: 20px;
        }

        p {
            width: 120px;
            text-align: center;
        }

        div {
            margin-right: 20px;
        }
    }

    .mVc {
        margin-top: 80px;
        padding: 0 40px;
        font-size: 16px;

        .mVcti {
            color: #666;
            margin-bottom: 20px;
            display: flex;

            span {
                color: #333;
            }

            p {
                margin: 0;
                min-width: 80px;
            }
        }
    }

    .mVctiR::before {
        content: '*';
        color: #f00;
        display: inline-block;
        margin-left: -10px;
        width: 5px;
        margin-right: 5px;
    }

    .sub {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>